<template>
  <div class="tool-text">
    <h2 class="bar-title break-words">
      <span class="text-gray-1000 font-bold text-26 leading-7 break-words w-full">
        {{$t('gpts_detail_functionsOf',{toolName: tool.name})}}
      </span>
    </h2>
    <div class="mt-7 functions-list space-y-4">
      <div :params="{handle:item.handle }"
        v-for="(item, key) in tool.ai_content.function"
        :key="`case-${key}`"
        class="function-item">
        <span class="text-base text-gray-1000 opacity-90 break-words">
          {{item}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'GptsToolDetailFunctions',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
}
</script>
<style lang='scss' scoped>
.functions-list {
  .function-item {
    padding-left: 14px;
    position: relative;
    &::after {
      position: absolute;
      left: 0;
      top: 7px;
      content: '';
      width: 6px;
      height: 6px;
      background: #3e74ef;
      border-radius: 50%;
    }
  }
}
</style>